<template>
	<div class="table-wrapper">
		<el-table
			:data="state.tableData.data"
			v-loading="state.tableData.loading"
			style="width: 100%"
			row-key="id"
			:height="tableHeight"
			default-expand-all
			highlight-current-row
		>
			<el-table-column type="expand" width="1">
				<template #default="props">
					<div>
						<el-table :data="props.row.afterSaleInfoVOS" :show-header="false">
							<el-table-column width="300">
								<template #default="scope">
									<div>
										<div class="aftersale_sn">售后单号：{{ scope.row.afterSaleSn }}</div>
										<div class="create-time">申请时间：{{ scope.row.createTime }}</div>
									</div>
								</template>
							</el-table-column>
							<el-table-column width="400">
								<template #default="scope">
									<div class="sd-goods sd-flex sd-col-top goods-aftersale">
										<div class="sda-image sd-flex" style="width: 64px; height: 64px; border-radius: 8px">
											<el-image :src="STATIC_URL + scope.row.orderGoodsVO.image" fit="cover" class="cover-image" />
										</div>
										<div class="ml12 sd-flex-1">
											<div class="title sd-table-line-1 mb6 is-active">
												{{ scope.row.orderGoodsVO.title }}
											</div>
											<div class="sd-flex mb12">
												<div class="price">¥{{ scope.row.orderGoodsVO.price }}</div>
												<div class="num ml8">x {{ scope.row.orderGoodsVO.quantity }}</div>
												<div class="expand ml4"></div>
											</div>
											<div class="sku">
												<span v-for="(sku, index) in scope.row.orderGoodsVO.skus" :key="sku" :class="{ ml5: index != 0 }"> {{ sku }} </span>
											</div>
										</div>
									</div>
								</template>
							</el-table-column>

							<el-table-column>
								<template #default="scope">
									<div>
										{{ scope.row.payFee }}
									</div>
								</template>
							</el-table-column>

							<el-table-column>
								<template #default="scope">
									<div>
										{{ scope.row.payFee }}
									</div>
								</template>
							</el-table-column>
							<el-table-column>
								<template #default="scope">
									<div>
										{{ scope.row.statusText }}
									</div>
								</template>
							</el-table-column>
							<el-table-column>
								<template #default="scope">
									<div>
										{{ scope.row.typeText }}
									</div>
								</template>
							</el-table-column>
							<el-table-column width="150">
								<template #default="scope">
									<el-button size="small" type="primary" text @click="afterSaleOrderDetail(scope.row)">详情 </el-button>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="orderSn" label="售后信息" show-overflow-tooltip width="300">
				<template #default="scope">
					<div class="sd-flex-start order-sn">
						订单编号：{{ scope.row.orderId }}
						<el-button text class="ml10" type="primary">详情</el-button>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="商品信息" show-overflow-tooltip width="400">
				<template #default="scope">
					<div class="sd-flex-start order-sn">下单时间：{{ scope.row.orderCreateTime }}</div>
				</template>
			</el-table-column>
			<el-table-column label="订单实付金额" show-overflow-tooltip>
				<template #default="scope">
					<el-button text type="primary">{{ scope.row.nickname }}</el-button>
				</template>
			</el-table-column>
			<el-table-column label="已退款金额" show-overflow-tooltip></el-table-column>
			<el-table-column label="处理状态" show-overflow-tooltip></el-table-column>
			<el-table-column label="售后类型" show-overflow-tooltip></el-table-column>
			<el-table-column label="操作" show-overflow-tooltip width="150"> </el-table-column>
		</el-table>
		<div class="pagination-container">
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				:page-sizes="[10, 15, 20, 30, 50, 100]"
				v-model:current-page="state.tableData.paging.currentPage"
				background
				v-model:page-size="state.tableData.paging.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="state.tableData.paging.totalCount"
			>
			</el-pagination>
		</div>

		<AfterSaleOrderDialog ref="AfterSaleOrderDialogRef"></AfterSaleOrderDialog>
	</div>
</template>

<script setup lang="ts">
import { computed, defineAsyncComponent, reactive, ref } from 'vue';
import { orderApi } from '/@/api/shop/aftersale';
import msg from '/@/utils/messageUtils';
import { STATIC_URL } from '/@/utils/config';

const AfterSaleOrderDialog = defineAsyncComponent(() => import('./Dialog.vue'));
const AfterSaleOrderDialogRef = ref();
// const GoodsSenderDialog = defineAsyncComponent(() => import('./GoodsSendDialog.vue'));
// const GoodsSenderDialogRef = ref();
// const GoodsUpdatePriceDialog = defineAsyncComponent(() => import('./UpdatePriceDialog.vue'));
// const GoodsUpdatePriceDialogRef = ref();
const state = reactive({
	isToggle: false,
	search: {
		name: '',
		orderStatus: '',
	},
	tableData: {
		data: [],
		total: 0,
		loading: false,
		paging: {
			currentPage: 1,
			pageSize: 15,
			totalCount: 0,
			totalPages: 0,
		},
	},
});

const tableHeight = computed(() => {
	return 'calc(100vh - 280px)'; // 精确计算后的固定值
});

const onHandleSizeChange = (pageSize: number) => {
	state.tableData.paging.pageSize = pageSize;
	getTableData();
};
// 分页改变
const onHandleCurrentChange = (currentPage: number) => {
	state.tableData.paging.currentPage = currentPage;
	getTableData();
};
const getTableData = async () => {
	try {
		const { data } = await orderApi().search({
			offset: (state.tableData.paging.currentPage - 1) * state.tableData.paging.pageSize,
			limit: state.tableData.paging.pageSize,
			orderStatus: state.search.orderStatus,
		});

		console.log('result: ', data);
		state.tableData.data = data.datas;
		state.tableData.paging.currentPage = data.paging.currentPage;
		state.tableData.paging.totalCount = data.paging.totalCount;
	} catch (e) {
		msg().error('查询失败，请稍后重试');
	}
};

const onOpen = (type: string, id: number) => {
	console.log('type: ', type);
	console.log('id: ', id);
};

const afterSaleOrderDetail = (row: any) => {
	console.log('row: ', row);
	AfterSaleOrderDialogRef.value.onOpenDialog(row.id);
};

const init = (search: OrderQuerySearch) => {
	// state.search.orderStatus = search.orderStatus;
	state.tableData.paging.currentPage = 1;
	state.tableData.paging.pageSize = 15;
	getTableData();
};

defineExpose({
	init,
});
</script>

<style scoped lang="scss">
.goods-item .right {
	flex: 1;
	line-height: 14px;
	font-size: 12px;
	font-weight: 400;
	color: #595959;
}

.goods-item .right .goods-title {
	height: 14px;
	line-height: 14px;
	font-size: 12px;
	font-weight: 500;
	margin-bottom: 4px;
}

.goods-item .right .goods-sku-text {
	height: 14px;
	line-height: 14px;
	margin-bottom: 10px;
}

.flex-content-center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.el-table__expand-icon > .el-icon {
	display: none !important;
}

:deep(.el-table__expand-icon) {
	display: none;
}

.aftersale_sn {
	font-size: 12px;
	color: var(--sd-subtitle);
}

.create-time {
	font-size: 12px;
	color: var(--sd-subfont);
}

.sd-col-top {
	align-items: flex-start;
}

.sda-image {
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
}

.sd-flex-1 {
	flex: 1;
}

.sd-table-line-1 {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	height: 23px;
	line-height: 23px;
}

.sd-goods .title.is-active {
	color: var(--el-color-primary);
	cursor: pointer;
}

.sd-goods .price,
.sd-goods .num {
	line-height: 14px;
	font-size: 12px;
	color: var(--sd-font);
	flex-shrink: 0;
}

.sd-goods .title {
	height: 14px;
	line-height: 14px;
	font-size: 12px;
	font-weight: 600;
	color: var(--sd-subtitle);
}

.sd-goods .sku {
	width: fit-content;
	height: 18px;
	line-height: 18px;
	padding: 0 8px;
	font-size: 12px;
	color: var(--sd-subfont);
	background: #f3f3f3;
	border-radius: 10px;
}

:deep(.el-table) .cell {
	box-sizing: border-box;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
	word-break: break-all;
	line-height: 23px;
	padding: 0 12px !important;
}

:deep(.aftersale-table) .el-table:not(.el-table--border) .el-table__cell {
	padding: 6px 0;
}

:deep(.aftersale-table) .el-table td.el-table__cell {
	border-bottom: 0px;
}

.order-sn {
	font-size: 12px;
	color: var(--sd-subtitle);
}

.sd-flex-start {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.table-wrapper {
	display: flex;
	flex-direction: column;
}
</style>
